<template>
  <div class="home">
    <h1>{{list}}</h1>
    <h1>{{number}}</h1>
    <h1>{{str}}</h1>
    <h1>{{getTotal}}</h1>
    <h1>{{sum}}</h1>
    <ul>
        <li v-for="item,index in list" :key="item" @click="remove(index)">{{item}}</li>
    </ul>
    <input type="text" v-model.number="title">
    <!-- <button @click="addNum">添加数据</button> -->
     <button @click="add(title)">添加数据</button>
     <h1>{{resList}}</h1>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
//   name: 'HomeView',
   data() {
    return {
        title:''
    }
   },
   created() {
    // this.$store.dispatch('getList')
    this.getList()
   },
  components: {
    // HelloWorld
  },
  computed:{
    // list(){
    //     return this.$store.state.list
    // },
    // num(){
    //     return this.$store.state.number
    // },
    // str(){
    //     return this.$store.state.str
    // }
    // 去循环你的state 把state展开在计算属性里面
    ...mapState(['list','number','str','resList']),

    // total(){
    //    return this.$store.getters.getTotal
    // }
    // 去循环你的getters 把getters里面的方法展开在计算属性里面
    ...mapGetters(['getTotal','sum'])
  },
  methods: {
    // del(index){
    //    this.$store.commit('del',index)
    // }
    // 展开的是mutations里面的方法
    ...mapMutations(['del','add']),
    remove(index){
        this.del(index)
    },
    
    // addNum(){
    //     this.$store.commit('add',this.title)
    // }
    // addNum(){
    //     this.add(this.title)
    // }
    // 去循环你的actions 把actions 里面的方法展开在methods里面
    // getList 方法不调用不执行， 刷新页面调用，所以在created钩子函数里面调用
    ...mapActions(['getList'])
  },
}
</script>
